<!--
 * @Author: 刘美红 liumeihong@llootong.com
 * @Date: 2025-04-17 17:55:12
 * @LastEditors: 刘美红 liumeihong@llootong.com
 * @LastEditTime: 2025-04-25 11:54:44
 * @FilePath: \xgjd-app\src\pages\index\component\ggaq\WeatherDetails.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
-->
<template>
  <view class="weather-box">
    <!-- 天气列表 -->
    <view class="tqyb-content">
      <view class="left">
        <text class="wd">早上好，许科长！</text>
        <text class="textr">今天的坚持，是明天的礼物~</text>
      </view>
      <view class="center">
        <!-- <text class="wd">这是个图片</text> -->
        <!-- <image class="weather-image"></image> -->
        <text class="textr">晴转多云</text>
      </view>
      <view class="right">
        <text class="textw">16°C</text>
        <text class="textr">10°C～18°C</text>
      </view>
    </view>
  </view>
</template>

<script setup></script>

<style lang="scss">
.weather-box {
  padding: 28.5rpx;
  font-size: 23rpx;

  .tqyb-content {
    padding: 38.46rpx;
    width: 692rpx;
    height: 154rpx;
    background: url('@/static/images/tqbg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .textr {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 33rpx; // 确保行高一致
      text-align: left;
      font-style: normal;
      margin-top: 21.5rpx;
    }

    .left {
      display: flex;
      flex-direction: column;

      .wd {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 23rpx;
        color: #ffffff;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
      }

      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12rpx;
        color: #ffffff;
        line-height: 17rpx;
      }
    }

    .center {
      display: flex;
      flex-direction: column;
      text-align: right;
    }

    .right {
      display: flex;
      flex-direction: column;

      .textw {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 50rpx;
        color: #ffffff;
        text-align: left;
        font-style: normal;
        font-size: 50rpx;
        line-height: 33rpx; // 设置相同的行高以保持高度一致
      }
    }
  }
}
</style>
